<template>
  <div>
    <slot></slot>
    <h4>共有{{ num }}条</h4>

    <ul>
      <li
        v-for="(item, index) in list"
        :key="item.id"
        v-show="status == 'all' ? true : item.status == status"
      >
        <input type="checkbox" v-model="item.status" />
        {{ item.title }}
        <button @click="remove(index)">删除</button>
      </li>
    </ul>

    {{ name }}=={{ age }}
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: ["status", "num"],
  data() {
    return {};
  },
  methods: {
    // remove(index) {
    //   this.$store.commit("remove", index);
    // },
    //删除方法

    ...mapMutations(["remove"]),
  },
  created() {},
  mounted() {},
  components: {},
  computed: {
    // list() {
    //   return this.$store.state.list;
    // },
    // name() {
    //   return this.$store.state.name;
    // },
    // age() {
    //   return this.$store.state.age;
    // },

    ...mapState(["list", "name", "age"]),
  },
  watch: {},
};
</script>

<style lang="scss" scoped></style>
